<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一元运购-首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 
<link rel="stylesheet" type="text/css" href="style/main.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div class="header">
		<div class="nav">
		    <div class="search"><a href="search.html"></a></div>
		    <div class="title"><a href="javascript:"><img src="images/logo.png" alt=""></a></div>
		    <div class="right">
		        <a href="javascript:"><img src="images/new.png" alt=""></a>
		        <a href="javascript:"><img onclick="$('#sub-title').toggle();$('#screenIfmNav').toggle();" src="images/add.png"></a>
		        <ul class="more" id="sub-title">
		            <li><a class="buy-icon" href="javaScript:">云购记录</a></li>
		            <li><a class="share-icon" href="javaScript:">二维码分享</a></li>
		            <li><a class="help-icon" href="help.html">帮助中心</a></li>
		            <li><a class="sao-icon" href="javaScript:">扫一扫</a></li>
		        </ul>

		    </div>
		    <div id="screenIfmNav" class="screenIfm" onclick="$('#sub-title').toggle();$(this).hide();"></div>
		</div>
	</div>
	<div class="container">
		<div id="focus" class="focus">
			<div class="hd"><ul></ul></div>
			<div class="bd">
				<ul>
					<li>
						<a href="javascript:;">
							<img _src="./images/slide1.png"/>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img _src="./images/slide2.png"/>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img _src="./images/slide3.png"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script>
			TouchSlide({ 
				slideCell:"#focus",
				titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
				mainCell:".bd ul", 
				effect:"left", 
				autoPlay:true,//自动播放
				autoPage:true, //自动分页
				switchLoad:"_src" //切换加载，真实图片路径为"_src" 
			});
		</script>
		<div class="iconlinks">
			<table>
				<tr>
					<td><a href="list.html"><div><img src="images/icon1.png" alt=""></div><span>新品</span></a></td>
					<td><a href="javascript:"><div><img src="images/icon2.png" alt=""></div><span>限购</span></a></td>
					<td><a href="comment.html"><div><img src="images/icon3.png" alt=""></div><span>晒单</span></a></td>
					<td><a href="javascript:"><div><img src="images/icon4.png" alt=""></div><span>新手</span></a></td>
					<td><a href="recharge.html"><div><img src="images/icon5.png" alt=""></div><span>充值</span></a></td>
				</tr>
			</table>
		</div>
		<!-- 最新揭晓 -->
		<div class="news">
			<div class="new_top">
				<a href="new.html">
					<div class="title">最新揭晓</div>
					<div class="newscroll">
						<div class="txtScroll-top">
							<div class="hd">
								<ul></ul>
							</div>
							<div class="bd">
								<ul class="infoList">
									<li>中国打破了世界软件巨头规则中国打破了世界软件巨头规则</li>
									<li>中国打破了世界软件巨头规则中国打破了世界软件巨头规则</li>
									<li>中国打破了世界软件巨头规则中国打破了世界软件巨头规则</li>
									<li>中国打破了世界软件巨头规则中国打破了世界软件巨头规则</li>
									<li>中国打破了世界软件巨头规则中国打破了世界软件巨头规则</li>
									<li>中国打破了世界软件巨头规则中国打破了世界软件巨头规则</li>
								</ul>
							</div>
						</div>

						<script type="text/javascript">
						jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"top",autoPlay:true,vis:1});
						</script>
					</div>
				</a>
			</div>
			<div class="newlist">
				<ul>
					<li>
						<a href="full_detail.html">
							<img src="images/new.jpg" alt="">
							<span>倒计时</span>
							<span class="time" id="time1"></span>
						</a>
					</li>
					<li>
						<a href="full_detail.html">
							<img src="images/new.jpg" alt="">
							<span>倒计时</span>
							<span class="time" id="time2"></span>
						</a>
					</li>
					<li>
						<a href="full_detail.html">
							<img src="images/new.jpg" alt="">
							<span>倒计时</span>
							<span class="time" id="time3"></span>
						</a>
					</li>
					<li>
						<a href="full_detail.html">
							<img src="images/new.jpg" alt="">
							<span>倒计时</span>
							<span class="time" id="time4"></span>
						</a>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<script type="text/javascript">
				
				var date = ["2018/05/06,10:36:00","2018/05/06,10:36:00","2018/05/06,10:46:00","2018/05/06,10:55:00"]
				$('.newlist li').each(function(n){
					var id  = $(this).find('.time').attr('id');
					interval(id,id,date[n]);
				}) 
			</script>
		</div>

		<!-- 新品推荐 -->
		<div class="intro">
			<div class="item">
				<span><img src="images/star.png" alt="">新品推荐</span>
			</div>
			<div class="introbox">
				<div class="left">
					<a href="detail.html">
						<h3>五羊</h3>
						<p>高端班车典范，行止间，宛若美妙旋律，淋漓精致</p>
						<img src="images/intro1.jpg" alt="">
					</a>
				</div>
				<div class="right">
					<a href="detail.html"><img src="images/intro2.jpg" alt="">
						<h3>莱克</h3>
						<p>独驱螺纹滚刷，高频强劲拍打</p>
					</a>
					
				</div>
				<div class="right">
					<a href="detail.html"><img src="images/intro2.jpg" alt="">
						<h3>莱克</h3>
						<p>独驱螺纹滚刷，高频强劲拍打</p>
					</a>
				</div>
			</div>
		</div>
		<!-- 猜你喜欢 -->
		<div class="like">
			<div class="item">
				<span><img src="images/like.png" alt="">猜你喜欢</span>
			</div>
			<ul class="i_ul">
				<li class="i_li">
					<a href="detail.html">
						<div class="img_inner">
							<img src="images/li.jpg">
						</div>
						<p class="i_txt">苹果7苹果7苹果7苹果7</p>
					</a>
					<div class="cont">
						<div class="linebox">
							<div class="line">
								<div class="on"></div>
							</div>
							<table>
								<tr>
									<td class="fore">4271</td>
									<td>7130</td>
									<td class="final">2859</td>
								</tr>
								<tr>
									<td>已参与</td>
									<td>总需人数</td>
									<td>剩余</td>
								</tr>
							</table>
						</div>	
						
						<div class="bom">
							<div class="cart"><a href="javascript:"></div></a>
							<a href="javascript:" class="buybtn">立即一元运购</a>
						</div>
					</div>
				</li>
				<li class="i_li">
					<a href="detail.html">
						<div class="img_inner">
							<img src="images/li.jpg">
						</div>
						<p class="i_txt">苹果7苹果7苹果7苹果7</p>
					</a>
					<div class="cont">
						<div class="linebox">
							<div class="line">
								<div class="on"></div>
							</div>
							<table>
								<tr>
									<td class="fore">4271</td>
									<td>7130</td>
									<td class="final">2859</td>
								</tr>
								<tr>
									<td>已参与</td>
									<td>总需人数</td>
									<td>剩余</td>
								</tr>
							</table>
						</div>	
						
						<div class="bom">
							<div class="cart"><a href="javascript:"></div></a>
							<a href="javascript:" class="buybtn">立即一元运购</a>
						</div>
					</div>
				</li>
				<li class="i_li">
					<a href="detail.html">
						<div class="img_inner">
							<img src="images/li.jpg">
						</div>
						<p class="i_txt">苹果7苹果7苹果7苹果7</p>
					</a>
					<div class="cont">
						<div class="linebox">
							<div class="line">
								<div class="on"></div>
							</div>
							<table>
								<tr>
									<td class="fore">4271</td>
									<td>7130</td>
									<td class="final">2859</td>
								</tr>
								<tr>
									<td>已参与</td>
									<td>总需人数</td>
									<td>剩余</td>
								</tr>
							</table>
						</div>	
						
						<div class="bom">
							<div class="cart"><a href="javascript:"></div></a>
							<a href="javascript:" class="buybtn">立即一元运购</a>
						</div>
					</div>
				</li>
				<li class="i_li">
					<a href="detail.html">
						<div class="img_inner">
							<img src="images/li.jpg">
						</div>
						<p class="i_txt">苹果7苹果7苹果7苹果7</p>
					</a>
					<div class="cont">
						<div class="linebox">
							<div class="line">
								<div class="on"></div>
							</div>
							<table>
								<tr>
									<td class="fore">4271</td>
									<td>7130</td>
									<td class="final">2859</td>
								</tr>
								<tr>
									<td>已参与</td>
									<td>总需人数</td>
									<td>剩余</td>
								</tr>
							</table>
						</div>	
						
						<div class="bom">
							<div class="cart"><a href="javascript:"></div></a>
							<a href="javascript:" class="buybtn">立即一元运购</a>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!-- 点击加载 -->
		<div class="load">
			<a href="javascript:">点击加载更多</a>
		</div>
	</div>
	
	<!-- 底部 -->
	<div class="footer">
		<ul class="wd_nav">
			<li class="home current"><a href="index.html">首页</a></li>
			<li class="goods"><a href="list.html">所有商品</a></li>
			<li class="news" ><a href="new.html">最新揭晓</a></li>
			<li class="car" id="shopCart"><a href="cart.html">购物车</a><i>2</i></li>
			<li class="my"><a href="my.html">我的</a></li>
		</ul>
	</div>
	<!-- 添加到购物车 -->
	<div id="flyItem" class="fly_item">
		<img src="" width="50" height="50"/>
	</div>
	<script type="text/javascript" src="js/parabola.js"></script>
	<script type="text/javascript">
		//元素以及其他一些变量
		var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");
		var numberItem = 0;
		// 抛物线运动
		var myParabola = funParabola(eleFlyElement, eleShopCart, {
			speed: 500, //抛物线速度
			curvature: 0.0008, //控制抛物线弧度
			complete: function() {
				eleFlyElement.style.visibility = "hidden";
			}
		});
		if (eleFlyElement && eleShopCart) {	
			[].slice.call(document.getElementsByClassName("cart")).forEach(function(button) {
					button.addEventListener("click", function(event) {
						
						var src = $(this).parents('.i_li').find('.img_inner img').attr("src");
						$("#flyItem").find("img").attr("src", src);
						// 滚动大小
						var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
								scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
						eleFlyElement.style.left = event.clientX + scrollLeft + "px";
						eleFlyElement.style.top = event.clientY + scrollTop + "px";
						eleFlyElement.style.visibility = "visible";
			
						// 需要重定位
						myParabola.position().move();
					});
			});
		}
	</script>
</body>
</html>